<template>
  <div>
    <div v-if="detail.address_id != 0  && detail.is_self_take != 1">
      <ul class="money address address_detail">
        <li>
          <section class="address_addres_info">收货信息</section>
          <section class="address_logo">
            <img src="https://img.wifenxiao.com/h5-wfx/images/order/adreess_log.png" alt />
          </section>
          <section class="address_info">
            <p class="info_top">
              收货人：
              <span>{{detail.name}}</span>&nbsp;&nbsp;
              <i>{{detail.mobile}}</i>
            </p>
            <p>{{detail.address}}</p>
            <p v-if="detail.card && detail.card_img">(身份证号：{{detail.card}}，照片已上传)</p>
            <p v-else-if="detail.card">(身份证号：{{detail.card}})</p>
            <p v-if="detail.email">(邮箱地址：{{detail.email}})</p>
          </section>
        </li>
      </ul>
      <ul class="money" v-if="detail.message">
        <li class="clearfix">
          <span class="fl">买家留言：</span>
          <span class="fr detail-message">{{detail.message}}</span>
        </li>
      </ul>
    </div>
    <div v-else-if="detail.is_self_take == 1" class="info">
      <div class="info-item">
        <p>
          <span>收货信息：{{otherData.take_their_name}}&nbsp;&nbsp;</span>
        </p>
        <p v-if="detail.receiver_name">买家姓名：{{detail.receiver_name}}</p>
        <p v-if="detail.receiver_mobile">手机号码：{{detail.receiver_mobile}}</p>
        <p>{{otherData.take_their_name}}地址：{{detail.self_address}}</p>
      </div>
    </div>
    <div v-else-if="detail.message">
      <ul class="money" v-if="detail.message">
        <li class="clearfix">
          <span class="fl">买家留言：</span>
          <span class="fr detail-message">{{detail.message}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
export default Vue.extend({
  props: {
    otherData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    detail: {
      type: Object,
      default: () => {
        return {}
      }
    }
  }
})
</script>

<style lang="scss">
@import 'src/styles/variables.scss';
@import 'src/styles/mixin';
.money {
  background: $default;
  padding: 0px 20px;
  text-align: initial;
  li {
    padding: 10px 0;
    border-bottom: 2px solid #eeeeee;
    line-height: 56px;
    color: #333333;
    font-size: 26px;
    .colorOran {
      color: #ff5a00;
    }
    .j-payment {
      font-size: 32px;
    }
    &:last-child {
      border-bottom: 0;
    }
    &.top {
      color: $default;
      span {
        color: $default;
      }
    }
    &.Upload_doc {
      width: 120px;
      height: 120px;
      border: #b6b6b6 dotted 2px !important;
      position: relative;
      margin: 20px 6px;
      margin-bottom: 26px;
      padding: 0px !important;
      float: left;
      line-height: 56px;
      color: #333333;
      font-size: 26px;
      img {
        width: 120px;
        height: 120px;
      }
    }
  }
  .invoice_info_title {
    height: 50px;
    line-height: 50px;
    font-size: 30px;
    color: #333;
    padding: 20px 0;
    border-bottom: 2px solid #eeeeee;
    box-sizing: content-box;
  }
  .invoice-detail {
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  &.address_detail {
    padding: 0;
    margin: 16px 0;
    &:before {
      content: '';
      height: 12px;
      width: 100%;
      background: url('https://img.wifenxiao.com/h5-wfx/images/order/address_border.png')
        repeat-x;
      background-size: 100% 12px;
      display: block;
    }
    li {
      padding: 0;
      margin-bottom: 0px;
      line-height: 40px;
      &:first-child {
        .address_logo {
          display: inline-block;
          width: 34px;
          height: 40px;
          padding-left: 20px;
          box-sizing: content-box;
          img {
            width: 100%;
            vertical-align: middle;
          }
        }
        .address_info {
          width: calc(100% - 110px);
          display: inline-block;
          vertical-align: middle;
          padding: 30px 20px 30px 20px;
          color: #999;
          font-size: 24px;
          box-sizing: content-box;
          .info_top {
            color: #666;
            font-size: 28px;
          }
        }
        .address_addres_info {
          height: 50px;
          line-height: 50px;
          font-size: 30px;
          color: #333;
          padding: 20px;
          border-bottom: 2px solid #eeeeee;
          box-sizing: content-box;
        }
      }
    }
  }
}
.info {
  background-color: $default;
  padding: 20px;
  font-size: 28px;
  line-height: 40px;
  margin-top: 20px;
  color: #333;
  p {
    font-size: 24px !important;
    text-align: left;
    line-height: 40px;
    color: #666;
  }
}
.detail-message {
  width: 100%;
  line-height: 34px;
  word-break: break-all;
}
</style>